<template>
  <div class="header">
    <div class="nav-topbar">
      <div class="container">
        <div class="topbar-menu">
          <a href="javascript:;">小米商城</a>
          <a href="javascript:;">MIUI</a>
          <a href="javascript:;">IoT</a>
          <a href="javascript:;">云服务</a>
          <a href="javascript:;">天星数科</a>
          <a href="javascript:;">有品</a>
          <a href="javascript:;">小爱开放平台</a>
          <a href="javascript:;">云服务</a>
        </div>
        <div class="topbar-user">
          <a href="javascript:;" v-if="username">{{username}}</a>
          <a href="javascript:;" v-if="!username" @click="login">登录</a>
          <a href="javascript:;" v-if="username" @click="logout">退出</a>
          <a href="javascript:;" v-if="username" @click="goToOrder">我的订单</a>
          <a href="javascript:;" v-if="username">消息通知</a>
          <a href="javascript:;" class="my-cart" @click="gotoCart"><span class="icon-cart"></span>购物车({{cartCount}})</a>
        </div>
      </div>
    </div>
    <div class="nav-header">
      <div class="container">
        <div class="header-logo">
          <a href="/#/index"></a>
        </div>
        <div class="header-menu">
          <div class="header-menu-item">
            <span>小米手机</span>
            <div class="children">
              <ul>
                <li
                  class="product"
                  v-for="item in phoneList"
                  :key="item.id"
                >
                  <a :href="`#/product/${item.id}`" target="_blank">
                    <div class="pro-img"><img :src="item.mainImage" :alt="item.name"></div>
                    <div class="pro-name">{{item.name}}</div>
                    <div class="pro-price">{{item.price | currency}}</div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="header-menu-item">
            <span>红米手机</span>
            <div class="children"></div>
          </div>
          <div class="header-menu-item">
            <span>小米电视</span>
            <div class="children">
              <ul>
                <li class="product">
                  <a href="javascript: ;" target="_blank">
                    <div class="pro-img"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f9149ef3ba2c9025a4a21c98ae793808.png?thumb=1&w=160&h=110&f=webp&q=90" alt=""></div>
                    <div class="pro-name">小米cc</div>
                    <div class="pro-price">1799元</div>
                  </a>
                </li>
                <li class="product">
                  <a href="javascript: ;" target="_blank">
                    <div class="pro-img"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f9149ef3ba2c9025a4a21c98ae793808.png?thumb=1&w=160&h=110&f=webp&q=90" alt=""></div>
                    <div class="pro-name">小米cc</div>
                    <div class="pro-price">1799元</div>
                  </a>
                </li>
                <li class="product">
                  <a href="javascript: ;" target="_blank">
                    <div class="pro-img"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f9149ef3ba2c9025a4a21c98ae793808.png?thumb=1&w=160&h=110&f=webp&q=90" alt=""></div>
                    <div class="pro-name">小米cc</div>
                    <div class="pro-price">1799元</div>
                  </a>
                </li>
                <li class="product">
                  <a href="javascript: ;" target="_blank">
                    <div class="pro-img"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f9149ef3ba2c9025a4a21c98ae793808.png?thumb=1&w=160&h=110&f=webp&q=90" alt=""></div>
                    <div class="pro-name">小米cc</div>
                    <div class="pro-price">1799元</div>
                  </a>
                </li>
                <li class="product">
                  <a href="javascript: ;" target="_blank">
                    <div class="pro-img"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f9149ef3ba2c9025a4a21c98ae793808.png?thumb=1&w=160&h=110&f=webp&q=90" alt=""></div>
                    <div class="pro-name">小米cc</div>
                    <div class="pro-price">1799元</div>
                  </a>
                </li>
                <li class="product">
                  <a href="javascript: ;" target="_blank">
                    <div class="pro-img"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f9149ef3ba2c9025a4a21c98ae793808.png?thumb=1&w=160&h=110&f=webp&q=90" alt=""></div>
                    <div class="pro-name">小米cc</div>
                    <div class="pro-price">1799元</div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="header-search">
          <div class="wrapper">
            <input type="text">
            <a href="javascript: ;" target="_blank"></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getProducts, getLogout, getCartSum} from './../util/request.js'
  import { mapState } from 'vuex'
  export default {
    data() {
      return {
        phoneList: []
      }
    },
    mounted() {
      this.getProductList()
      if (this.$route.params && this.$route.params.from === '/login') {
        this.getCartCount()
      }
    },
    methods: {
      getProductList() {
        let params ={
          categoryId:'100012',
            pageSize: 6
        }
        getProducts(params).then(res => {
          this.phoneList = res.list
        })
      },
      login() {
        this.$router.push('/login')
      },
      // 退出登录
      logout() {
        getLogout().then( () => {
          this.$message.success('退出成功')
          // 清空cookie
          this.$cookie.set('userId','',{expires:'-1'})
          // 清空vuex中的用户信息
          this.$store.dispatch('saveUserName', '')
          // 清空购物车数量
          this.$store.dispatch('saveCartCount', '0')
        })
      },
      getCartCount() {
        if (this.$cookie.get('userId')) {
          getCartSum().then( (res = 0 ) => {
            this.$store.dispatch('saveCartCount', res)
          })
        }
      },
      goToOrder() {
        this.$router.push('/order/list')
      },
      gotoCart() {
        this.$router.push('/cart')
      }
    },
    filters: {
      currency(val) {
        if (!val) return '0.00';
        return '￥' + val.toFixed(2) + '元'
      }
    },
    computed: {
      ...mapState(['username', 'cartCount'])
    }
  }
</script>

<style lang='scss'>
@import '../assets/scss/base.scss';
@import '../assets/scss/mixin.scss';
@import '../assets/scss/config.scss';
.header{
  .nav-topbar{
    height:39px;
      line-height:39px;
      background-color:#333333;
      color:#B0B0B0;
    .container{
      @include flex();
      a{
        display: inline-block;
        color: #B0B0B0;
        margin-right: 17px;
      }
      .my-cart{
        width: 110px;
        background-color: #FF6600;
        color: #fff;
        text-align: center;
        margin-right: 0;
         .icon-cart{
          display: inline-block;
          margin-right: 4px;
          @include bgImg(16px,14px,'/imgs/icon-cart-checked.png');
        }
      }
    }
  }
  .nav-header{
    .container{
      position: relative;
      @include flex();
      height: 112px;
      .header-menu{
        display: inline-block;
        flex: 1;
        padding-left:209px;
        .header-menu-item{
          display: inline-block;
          margin-right: 20px;
          color: #000;
          font-size: 16px;
          font-weight: bold;
          line-height: 112px;
          span{
            cursor: pointer;
          }
          &:hover{
              color: $colorA;
              .children{
                height: 220px;
                opacity: 1;
                border-top: 1px solid $colorH;
              }
            }
          .children{
            position: absolute;
            z-index: 10;
            top: 112px;
            left: 0;
            width: 1226px;
            box-shadow: 0px 7px 6px 0px rgba(0, 0, 0, 0.11);
            background-color: #ffffff;
            height: 0;
            opacity: 0;
            overflow: hidden;
            transition: all .5s;
            .product{
              position: relative;
              float: left;
              width: 16.666%;
              font-size: 12px;
              line-height:12px;
              height: 220px;
              text-align: center;
              background-color: #ffffff;
              a{
                display: inline-block;
                height: 100%;
                width: 100%;
              }
              &::after{
                content: '';
                display: inline-block;
                position: absolute;
                top: 28px;
                right: 0;
                height: 99px;
                width: 1px;
                border-right: 1px solid $colorF;
              }
              &:last-child::after{
                display: none;
              }
              .pro-img{
                margin-top: 26px;
                height: 137px;
                img{
                width: auto;
                height: 111px;
              }
              }
              .pro-name{
                color: $colorB;
              }
              .pro-price{
                color: $colorA;
              }
            }
          }
        }
      }
      .header-search{
        .wrapper{
          width: 319px;
          height: 50px;
          border: 1px solid #E0E0E0;
          input{
            display: inline-block;
            width: 264px;
            border: none;
            border-right: 1px solid #E0E0E0;
            height: 50px;
            padding-left: 1em;
          }
          a{
            display: inline-block;
            @include bgImg(18px,18px,'/imgs/icon-search.png');
            margin-left: 18px;
          }
        }
      }
    }
  }
}
</style>